<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>用户登录</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="" />
        <meta name="author" content="stilearning" />

        
        <!-- styles -->
        <link href="../css/bootstrap.css" rel="stylesheet" />
        <link href="../css/bootstrap-responsive.css" rel="stylesheet" />
        <link href="../css/stilearn.css" rel="stylesheet" />
        <link href="../css/stilearn-responsive.css" rel="stylesheet" />
        <link href="../css/stilearn-helper.css" rel="stylesheet" />
       <link href="../css/stilearn-icon.css" rel="stylesheet" />
       <link href="../css/font-awesome.css" rel="stylesheet" />
        <link href="../css/animate.css" rel="stylesheet" />
       <link href="../css/uniform.default.css" rel="stylesheet" />
        <script type="text/javascript" src="../js/jquery.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    	.loginDiv{
    		width: 40%;
    		margin: auto;
    	}
    </style>
    <script type="text/javascript">
    	function showRegist(){
    		$("#loginDiv").removeClass("loginDiv");
    		$("#loginDiv").attr("class","span5 offset1");
    		$("#registId").css("display","block");
    	}
    </script>
    </head>

    <body>
        <header class="header" data-spy="affix" data-offset-top="0">
            <div class="navbar-helper">
                <div class="row-fluid">
                    <div class="span2">
                        <div class="panel-sitename">
                            <h2><a href="index.html">
                            	<span class="color-teal">分销商</span>平台</a></h2>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        
        <section class="section">
            <div class="container">
                <div class="signin-form row-fluid">
                    <div id="loginDiv" class="loginDiv">
                        <div class="box corner-all">
                            <div class="box-header grd-teal color-white corner-top">
                                <span>用户登录</span>
                            </div>
                            <div class="box-body bg-white">
                                <form id="sign-in" method="post"  action="index.html" style="height: 250px;">
                                    <div class="control-group">
                                        <label class="control-label">用户名</label>
                                        <div class="controls">
                                            <input type="text" class="input-block-level" name="username" autocomplete="off" />
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label class="control-label">密码</label>
                                        <div class="controls">
                                            <input type="password" class="input-block-level" name="password"  autocomplete="off" />
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label class="control-label">请选择分销商</label>
                                        <div class="controls">
                                            <select>
                                            	<option value="23">分销商1
                                            	<option value="67">分销商2
                                            	<option value="34">分销商13
                                            	<option value="3">分销商4
                                            	<option value="1">分销商5
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-actions">
                                        <p></p>
                                        <input type="submit" class="btn btn-block  btn-primary" style="width: 90%;margin: auto;" value="登录" />
                                         <p></p>
                                        <input type="button" class="btn btn-block  btn-primary" style="width: 90%;margin: auto;" value="点此注册"  onclick="showRegist()"/>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="span5" style="display: none;" id="registId">
                        <div class="box corner-all">
                            <div class="box-header grd-green color-white corner-top">
                                <span>用户注册</span>
                            </div>
                            <div class="box-body bg-white">
                                <form id="sign-up" method="post" >
                                    <div class="control-group">
                                        <label class="control-label">用户登录名</label>
                                        <div class="controls">
                                            <input type="text" class="input-block-level" data-validate="{required: true, messages:{required:'Please enter field username'}}" name="username" id="username" autocomplete="off" />
                                            <p class="help-block muted helper-font-small">可以包含字母，数字，破折号和下划线，并应在2至20个字符之间。</p>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label class="control-label">密码</label>
                                        <div class="controls">
                                            <input type="password" class="input-block-level" data-validate="{required: true, minlength: 6, messages:{required:'Please enter field password', minlength:'Please enter at least 6 characters.'}}" name="password" id="password" autocomplete="off" />
                                            <p class="help-block muted helper-font-small">至少6位数字或字符</p>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label class="control-label">重复密码</label>
                                        <div class="controls">
                                            <input type="password" class="input-block-level" data-validate="{required: true, equalTo: '#password', messages:{required:'Please enter field confirm password', equalTo: 'confirmation password does not match the password'}}" name="password_again" id="password_again" autocomplete="off" />
                                            <p class="help-block muted helper-font-small">再次输入密码</p>
                                        </div>
                                    </div>
                                     <div class="control-group">
                                        <label class="control-label">姓名</label>
                                        <div class="controls">
                                            <input type="text" class="input-block-level" data-validate="{required: true, equalTo: '#password', messages:{required:'Please enter field confirm password', equalTo: 'confirmation password does not match the password'}}" name="name" id="name" autocomplete="off" />
                                            <p class="help-block muted helper-font-small">请填入真实姓名，以便购买车票</p>
                                        </div>
                                    </div>
                                     <div class="control-group">
                                        <label class="control-label">性别</label>
                                        <div class="controls">
                                            <input type="radio" name="sex" value="m" />男
                                            <input class="offset1" type="radio" name="sex" value="f" />女
                                            <p class="help-block muted helper-font-small"></p>
                                        </div>
                                    </div>
                                     <div class="control-group">
                                        <label class="control-label">身份证号</label>
                                        <div class="controls">
                                            <input type="text" class="input-block-level" data-validate="{required: true, equalTo: '#password', messages:{required:'Please enter field confirm password', equalTo: 'confirmation password does not match the password'}}" name="id_card" id="id_card" autocomplete="off" />
                                            <p class="help-block muted helper-font-small">请输入公民身份证号，这将作为您的取票依据</p>
                                        </div>
                                    </div>
                                    
                                     <div class="control-group">
                                        <label class="control-label">邮箱</label>
                                        <div class="controls">
                                            <input type="email" class="input-block-level" data-validate="{required: true, email:true, messages:{required:'Please enter field email', email:'Please enter a valid email address'}}" name="email" id="email" autocomplete="off" />
                                            <p class="help-block muted helper-font-small">
                                            	请输入正确的邮箱格式
                                            </p>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label class="control-label">请选择分销商</label>
                                        <div class="controls">
                                            <select>
                                                <option value="23">分销商1
                                                <option value="67">分销商2
                                                <option value="34">分销商3
                                                <option value="3">分销商4
                                                <option value="1">分销商5
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-actions">
                                        <input type="submit" class="btn btn-block btn-large btn-success" value="注册"/>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
        </section>

    </body>
</html>
